<template>
  <view>
    <view v-if="atype === 'mp4' || atype === 'ogg'" class="adsbox" :style="{ 'height': boxheight + 'px' }">
      <video muted ref="startvideo" class="video" poster="false.png" autoplay controls loop>
        <source :src="ads.image" type="video/mp4" />
        <source :src="ads.image" type="video/ogg" />
        <text>你的浏览器不支持 video 标签.</text>
      </video>
    </view>
    <view v-else class="adsbox" :style="{ 'height': boxheight + 'px', 'background-image': 'url(' + ads.image + ')' }">
    </view>
  </view>
</template>

<script>
  export default {
       props: {
           shopid: 0,
           pptv: 0
       },
       data() {
           return {
              ads: '',
              atype: '',
              boxheight: 370,
              timelen: 20000
           }
       },
      mounted() {
          this.setboxheight()
          this.getAdsList()
      },
      methods: {
          setboxheight () {
              this.pptvv = this.pptv
  
              // eslint-disable-next-line eqeqeq
              if (this.pptvv == 1) {
                  this.boxheight = 530
              } else {
                  this.boxheight = 370
              }
          },
          getAdsList() {
              this.$http({
                  url: `/bigscreen/getads`,
                  data: {
                      shop: this.shopid
                  },
                  method: 'post'
              }).then(response => {
                  this.ads = response.adsa
                  let adsarr = this.ads['image'].split('.');
                  this.atype = adsarr[adsarr.length - 1];
                  if (this.atype === 'mp4' || this.atype === 'ogg') {
                      this.timelen = this.ads['timelen']
                      // let video = this.$refs.startvideo
                      // video.play();
                  }
                  this.$emit('func', this.timelen);
                  // console.log(this.atype)
              }).catch(error => {
                  console.log(error)
              })
          }
      },
      watch: {
          pptv(newVal,oldVal) {
              this.setboxheight()
          }
      },
  };
</script>

<style scoped>
  .adsbox {
    background-size: cover;
    background-position: center center;
  }

  .video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }
</style>